<template>
	<view class="conten">
		<image src="../../static/gao/bg.png" mode="" class="bg"></image>
		<image src="../../static/gao/arrows.png" mode="" class="arrows"></image>
		<image src="../../static/gao/cha1.png" mode="" class="cha1"></image>
	

		<view class="te1" hover-class="tet1">缴费</view>
		<view class="te2" hover-class="tet2">充值</view>
		<image src="../../static/gao/bg2.png" mode="" class="bg2"></image>
		<text class="mon">4月</text>
		<image src="../../static/gao/three.png" mode="" class="three"></image>\
		<image src="../../static/gao/four.png" mode="" class="four"></image>
		<view class="water">
			<image src="../../static/gao/ico1.png" mode="" class="ico1"></image>
			<image src="../../static/gao/tran.png" mode="" class="icon1"></image>
			<text class="sf">水费缴费</text>
			<image src="../../static/gao/data.png" mode="" class="data1"></image>
			<!-- <text>-218</text> -->
		</view>
		<view class="elec">
			<image src="../../static/gao/ico2.png" mode="" class="ico2"></image>
			<image src="../../static/gao/tran.png" mode="" class="icon2"></image>
			<text class="df">电费缴费</text>
			<image src="../../static/gao/data.png" mode="" class="data2"></image>
		</view>
		<view class="fire">
			<image src="../../static/gao/ico3.png" mode="" class="ico3"></image>
			<text class="rq">燃气缴费</text>
			<image src="../../static/gao/data.png" mode="" class="data3"></image>
		</view>

		<text class="mon5">5月</text>
		<image src="../../static/gao/three.png" mode="" class="three5"></image>
		<image src="../../static/gao/four.png" mode="" class="four5"></image>
		<view class="water5">
			<image src="../../static/gao/ico1.png" mode="" class="ico15"></image>
			<image src="../../static/gao/tran.png" mode="" class="icon15"></image>
			<text class="sf5">水费缴费</text>
			<image src="../../static/gao/data.png" mode="" class="data15"></image>
			<!-- <text>-218</text> -->
		</view>
		<view class="elec5">
			<image src="../../static/gao/ico2.png" mode="" class="ico25"></image>
			<image src="../../static/gao/tran.png" mode="" class="icon25"></image>
			<text class="df5">电费缴费</text>
			<image src="../../static/gao/data.png" mode="" class="data25"></image>
		</view>
		<view class="fire5">
			<image src="../../static/gao/ico3.png" mode="" class="ico35"></image>
			<text class="rq5">燃气缴费</text>
			<image src="../../static/gao/data.png" mode="" class="data35"></image>
		</view>

	</view>
</template>
<script src="/echarts.min.js" ></script>
<script src="/echarts.js" ></script>

<script>
	
</script>

<style>


	.conten .bg {
		width: 750rpx;
		height: 451rpx;
	}

	.conten .arrows {
		width: 44rpx;
		height: 28rpx;
		position: absolute;
		top: 40rpx;
		left: 24rpx;
	}

	.conten .cha1 {
		width: 142rpx;
		height: 35rpx;
		position: absolute;
		top: 37rpx;
		left: 304rpx;
	}

	.conten .te1 {
		font-size: 40rpx;
		font-weight: 700;
		display: inline;
		margin-left: 211rpx;
		line-height: 98rpx;
	}

	.conten .tet1 {
		font-size: 40rpx;
		font-weight: 700;
		color: #007AFF;
		line-height: 98rpx;
		padding-bottom: 20rpx;
		border-bottom: 15rpx solid #007AFF;

	}

	.conten .te2 {
		font-size: 44rpx;
		font-weight: 700;
		display: inline;
		margin-left: 211rpx;
	}

	.conten .tet2 {
		font-size: 44rpx;
		font-weight: 700;
		color: #007AFF;
		padding-bottom: 20rpx;
		border-bottom: 15rpx solid #007AFF;
	}

	.conten .bg2 {
		width: 750rpx;
		height: 792rpx;
	}

	/* 4月 */
	.conten .mon {
		font-size: 26rpx;
		font-weight: 700;
		position: absolute;
		top: 563rpx;
		left: 34rpx;
	}

	.conten .three {
		width: 18rpx;
		height: 9rpx;
		position: absolute;
		top: 578rpx;
		left: 85rpx;
	}

	.conten .four {
		width: 749rpx;
		height: 364rpx;
		position: absolute;
		top: 620rpx;
		left: 1rpx;
	}

	.conten .ico1 {
		width: 44rpx;
		height: 54rpx;
		position: absolute;
		top: 640rpx;
		left: 36rpx;
	}

	.conten .water .icon1 {
		width: 691rpx;
		height: 5rpx;
		position: absolute;
		top: 731rpx;
		left: 27rpx;
	}

	.conten .sf {
		font-size: 27rpx;
		position: absolute;
		top: 640rpx;
		left: 129rpx;
	}

	.conten .df {
		font-size: 27rpx;
		position: absolute;
		top: 760rpx;
		left: 129rpx;
	}

	.conten .rq {
		font-size: 27rpx;
		position: absolute;
		top: 880rpx;
		left: 129rpx;
	}

	.conten .ico2 {
		width: 44rpx;
		height: 54rpx;
		position: absolute;
		top: 767rpx;
		left: 36rpx;
	}

	.conten .icon2 {
		width: 691rpx;
		height: 5rpx;
		position: absolute;
		top: 856rpx;
		left: 27rpx;
	}

	.conten .ico3 {
		width: 44rpx;
		height: 54rpx;
		position: absolute;
		top: 888rpx;
		left: 36rpx;
	}

	.conten .data1 {
		width: 132rpx;
		height: 19rpx;
		position: absolute;
		top: 695rpx;
		left: 128rpx;
	}

	.conten .data2 {
		width: 132rpx;
		height: 19rpx;
		position: absolute;
		top: 815rpx;
		left: 128rpx;
	}

	.conten .data3 {
		width: 132rpx;
		height: 19rpx;
		position: absolute;
		top: 940rpx;
		left: 128rpx;
	}


	/* 五月 */
	.conten .mon5 {
		font-size: 26rpx;
		font-weight: 700;
		position: absolute;
		top: 997rpx;
		left: 34rpx;
	}

	.conten .three5 {
		width: 18rpx;
		height: 9rpx;
		position: absolute;
		top: 1012rpx;
		left: 85rpx;
	}

	.conten .four5 {
		width: 749rpx;
		height: 364rpx;
		position: absolute;
		top: 1054rpx;
		left: 1rpx;
	}

	.conten .ico15 {
		width: 44rpx;
		height: 54rpx;
		position: absolute;
		top: 1074rpx;
		left: 36rpx;
	}

	.conten .water5 .icon15 {
		width: 691rpx;
		height: 5rpx;
		position: absolute;
		top: 1165rpx;
		left: 27rpx;
	}

	.conten .sf5 {
		font-size: 27rpx;
		position: absolute;
		top: 1074rpx;
		left: 129rpx;
	}

	.conten .df5 {
		font-size: 27rpx;
		position: absolute;
		top: 1194rpx;
		left: 129rpx;
	}

	.conten .rq5 {
		font-size: 27rpx;
		position: absolute;
		top: 1314rpx;
		left: 129rpx;
	}

	.conten .ico25 {
		width: 44rpx;
		height: 54rpx;
		position: absolute;
		top: 1201rpx;
		left: 36rpx;
	}

	.conten .icon25 {
		width: 691rpx;
		height: 5rpx;
		position: absolute;
		top: 1290rpx;
		left: 27rpx;
	}

	.conten .ico35 {
		width: 44rpx;
		height: 54rpx;
		position: absolute;
		top: 1322rpx;
		left: 36rpx;
	}

	.conten .data15 {
		width: 132rpx;
		height: 19rpx;
		position: absolute;
		top: 1129rpx;
		left: 128rpx;
	}

	.conten .data25 {
		width: 132rpx;
		height: 19rpx;
		position: absolute;
		top: 1249rpx;
		left: 128rpx;
	}

	.conten .data35 {
		width: 132rpx;
		height: 19rpx;
		position: absolute;
		top: 1374rpx;
		left: 128rpx;
	}
</style>
